import React, { Component } from 'react'
import store from '../Store'

export default class Redux extends Component {
    constructor() {
        super();
        this.state = {
            user: {
                userName: ''
            },
            order: {
                orderList: []
            }
        }
    }
    componentDidMount() {
        this.setState(store.getState());
        store.subscribe(() => {
            this.setState(store.getState());
        })
    }
    changeName() {
        store.dispatch({type: 'changeName', userName: '国服第一亚索'})
    }
    addGoods() {
        store.dispatch({type: 'add', goods: {name: 'apple'}})
    }
    render() {
        console.log(store.getState());
        return (
            // Fragment 片段
            <React.Fragment>
                <p>redux-页面</p>
                <p>{this.state.user.userName}</p>
                <button onClick={()=>this.changeName()}>改名卡</button>
                <button onClick={()=>this.addGoods()}>加购</button>
                <hr></hr>
                <p>订单内容</p>
                {
                    this.state.order.orderList.map((item, index)=>{
                        return (
                            <div key={index}>{item.name}</div>
                        )
                    })
                }
            </React.Fragment>
        )
    }
}


// mapStateToProps 名字翻译就是映射store中的state到当前组件的props
// mapDispatchToProps  名字翻译就是映射store中的dispatch到当前组件的props
// 第一个类似vuex中的mapState+mapGetters 第二个类似mapMutation+mapAction
// 第一个的作用是获取数据state    第二个的作用是修改数据dispatch
